<!--  -->
<template>
  <div class="detail">
      <nav-bar>
          <div slot="left" class="detail_prev" @click="detail_home">返回</div>
          <div slot="center" class="detail_top">
              <span>商品</span>
              <span>参数</span>
              <span>评论</span>
              <span>推荐</span>
          </div>
      </nav-bar>
      <detail-swiper :goods="detail_swiper"/>
      <div>{{goods.result.detailInfo.desc}}</div>
      <DetailPrice :goods="goods"/>
       <div class="price">{{goods.result.itemInfo.price}}</div>
      <detail-image :goods="goods" v-if="goods.result.detailInfo.detailImage"></detail-image>

      <div class="footer">
          <div class="item">客服</div>
          <div class="item">店铺</div>
          <div class="item">收藏</div>
          <div class="cart" @click="cartClick">加入购物车</div>
      <div class="mai">购买</div>
      </div>

     
  </div>
</template>

<script>
import {getDetail} from "network/detail"
import NavBar from "components/common/navbar/NavBar"
import DetailSwiper from "./childComps/DetailSwiper"
import DetailPrice from "./childComps/DetailPrice"
import DetailImage from "./childComps/DetailImage"
export default {
    components:{
        NavBar,
        DetailSwiper,
        DetailPrice,
        DetailImage
    },
    data(){
        return{
            iid:null,
            goods:{
                result:{
                    detailInfo:{price:'',DetailImage:[{list:''}]},
                    itemInfo:{price:""},
                    columns:[{},{},{}]
                }
            },
            detail_swiper:null,
        }
    },
    created(){
        this.iid=this.$route.params.iid
        getDetail(this.iid).then(res=>{
            this.goods=res
            this.detail_swiper=this.goods.result.itemInfo.topImages
            
        })
    },
    methods:{
      detail_home(){
          this.$router.push("/home")
      },
      cartClick(){
          const good={
              check:true,
              count:1,
              iid:this.goods.iid,
              result:this.goods.result,
              price:this.goods.result.itemInfo.lowPrice*100/100
          }

          this.$store.commit("pushCart",good)
          
          
          
      }
    }
}

</script>
<style scoped>
.detail_prev{
    font-size: 13px;
}
.detail_top{
    font-size: 13px;
    display: flex;
    justify-content: space-around;
}
.footer{
    display: flex;
    position: fixed;
    bottom: 49px;
    right:0;
     text-align: center;
      height: 50px;
    line-height: 50px;
    background-color: #fff;
}
.cart{

    width: 100px;
    background-color: yellow;

}
.mai{
    background-color: var(--color-tint);
    width: 60px;
     color: #fff;
}
.price{
    margin:10px;
    font-size: 24px;
    color:orangered;
}
.item{
    width: 55px;
    font-size: 13px;

}
</style>